<template>
    <!-- 知识点标题 -->
    <div class="title">Promise 对象</div>
    <!-- 知识点正文 -->
    <div class="inner">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="url" label="URL" />
      <el-table-column prop="state" label="State" />
    </el-table></div>
    <!-- 在此处放置一个 el-table, 并完成渲染. -->
</template>
<script setup>
import { ref, onMounted } from "vue";

// 以下以 setTimeout 模拟异步获取的数据, 请使用 Promise 接管以下异步产生的数据.
// 通过 Promise 链式编程将数据渲染到一个 Element Plus 的 Table 组件中,
let tableData=ref('');
const promiseResult=new Promise((resolve)=>{
        setTimeout(function () {
        let jsonCompanies = ref([
        {
            id: 1,
            name: "Google",
            url: "http://www.google.com",
            state: "USA"
        },
        {
            id: 2,
            name: "Baidu",
            url: "http://www.baidu.com",
            state: "PRC"
        },
        {
            id: 3,
            name: "Tencent",
            url: "http://www.tencent.com",
            state: "PRC"
        },
        {
            id: 4,
            name: "ByteDance",
            url: "http://www.bytedance.com",
            state: "PRC"
        },
        {
            id: 5,
            name: "Microsoft",
            url: "http://www.microsoft.com",
            state: "USA"
        }, {
            id: 6,
            name: "Alibaba",
            url: "http://www.alibaba.com",
            state: "PRC"
        },
    ]);
    resolve(jsonCompanies.value)
}, 3000);
}).then((data)=>{tableData.value=data})
</script>
<style scoped>

</style>
 